/**
 * 分类模块
 */

import { topCategory } from '@/constant'
import API from '@/api/category'
import { reactive } from 'vue'

export default {
  namespaced: true,
  state() {
    return {
      // 分类信息集合, 依赖topCategory重新设置, 保证初始化就要数据, 不至于白屏
      list: topCategory.map(item => {
        return { name: item }
      })
    }
  },
  // getters: {
  //   homeCategory (state) {
  //     const brand = reactive({
  //       id: 'brand',
  //       name: '品牌',
  //       children: [{
  //         id: 'brand-children',
  //         name: '品牌推荐'
  //       }]
  //     })
  //
  //     const menuList = state.list.map((item) => {
  //       return {
  //         id: item.id,
  //         name: item.name,
  //         // 非空判断一下, 防止初始化时没有children的时候调用slice函数报错
  //         children: item.children && item.children.slice(0, 2),
  //         goods: item.goods
  //       }
  //     })
  //
  //     menuList.push(brand)
  //
  //     return menuList
  //   }
  // },
  // 修改分类函数
  mutations: {
    // payload 是所有分类集合
    setList(state, payload) {
      state.list = payload
    },
    // 定义show和hide函数, 控制当前分类的二级分类显示和隐藏
    show(state, id) {
      // find()方法返回数组中满足条件的第一个元素的值.
      const currCategory = state.list.find(item => item.id === id)
      currCategory.open = true
    },
    hide(state, id) {
      const currCategory = state.list.find(item => item.id === id)
      currCategory.open = false
    }
  },
  // 获取分类函数
  actions: {
    async getList(ctx) {
      // 获取分类数据
      const { result } = await API.getAllCategory()

      // 修改分类数据
      if (result.length > 0) {
        // 给每个分类加上控制二级分类显示隐藏的数据
        result.forEach(top => {
          top.open = false
        })
        // console.log(result)
        ctx.commit('setList', result)
      }
    }
  }
}
